<template>
	<view class="wrapper coupon">
		<view class="coupon-content">
			<view class="coupon-list">
				<view class="coupon-one" v-for="(item, index) in tableList" :key="index">
					<coupon-item :coupon="item">
						<template #receive="{item1}">
							<view class="coupon-item-btn1 main-flex" v-if="item.have === 1" @click="goCategory(item)">立即使用</view>
							<view class="coupon-item-btn" v-else-if="item.have === 0" @click="coupon(item)">立即领取</view>
						</template>
					</coupon-item>
				</view>
				<view
					v-if="isNull"
					class="null main-flex">
					<u-empty text="还没有优惠券领取哟~" icon="/static/images/null.png"></u-empty>
				</view>
				<view
					v-else
					class="more main-flex">
					<uni-load-more :status="status" :showText="false" />
				</view>
			</view>
		</view>
		
		<view class="coupon-bottom safe-area">
			<view class="coupon-bottom-box main-flex" @click="goCoupon">我的优惠券</view>
		</view>
		
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { throttle, debounce, sleep } from '@/uni_modules/uview-plus'
import { arrText } from '@/utils/ty'
import modal from '@/plugins/modal'
import { couponReceiveList, couponProductReceiveList, couponGetOne } from "@/api/app_api/coupon"

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	const provinceList = ref([])
	watch(() => setStore.provinceList, (nVal, oVal) => {
		if (nVal) {
			provinceList.value = setStore.provinceList
		}
	}, { immediate: true })
	
	// 列表查询
	const tableList = ref([])
	const isLoading = ref(false)
	const status = ref('more')
	const isNull = ref(false)
	
	const searchFirst = () => {
		tableList.value = []
		status.value = 'loading'
		isNull.value = false
		getList()
	}
	
	const getList = () => {
		isLoading.value = true
		// uni.showLoading({
		// 	title: '数据加载中...'
		// })
		Promise.all([couponReceiveList(), couponProductReceiveList({
			regionCode: userStore.regionCode
		})]).then(([result1, result2]) => {
			const coupon1 = result1.data || []
			const coupon2 = result2.data || []
			const nowTime = new Date()
			tableList.value = coupon1.concat(coupon2).sort((a, b) => a.have - b.have).filter(item => {
				const endTime = new Date(item.endTime)
				return nowTime.getTime() < endTime.getTime()
			})
			// console.log(tableList.value)
			status.value = 'no-more'
			isNull.value = tableList.value.length === 0
			isLoading.value = false
		}).catch(() => {
			isLoading.value = false
			isNull.value = false
		})
	}
	
	// 监听选择的地区
	watch(() => userStore.regionCode, (nval, oval) => {
		if (nval) {
			getList()
		}
	})
	// 领取优惠券
	const isSubmit = ref(false)
	const coupon = (item) => {
		if (isSubmit.value) return false
		isSubmit.value = true
		couponGetOne({
			id: item.id,
			productId: item?.productId || ''
		}).then(async res => {
			if (res.code === 200) {
				getList()
				uni.$u.toast('领取成功')
			} else {
				uni.$u.toast(res.msg)
			}
			await uni.$u.sleep(1000)
			isSubmit.value = false
		}).catch(err => {
			isSubmit.value = false
		})
	}
	const goCoupon = () => {
		uni.navigateTo({
			url: '/pages/coupon/user'
		})
	}
	const goCategory = (res) => {
		uni.switchTab({
			url: `/pages/category/category`
		})
	}
	onLoad(() => {
		if (userStore.regionCode) {
			searchFirst()
		}
	})
	
</script>

<style lang="scss">
	.coupon{
		&-tab {
			position: fixed;
			height: 80rpx;
			width: 100%;
			left: 0;
			background-color: #ffffff;
		}
		&-content {
			padding: 20rpx;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 116rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 116rpx);
		}
		&-list {
			.coupon-one + .coupon-one {
				margin-top: 20rpx;
			}
		}
		&-item {
			&-btn {
				width: 150rpx;
				height: 48rpx;
				border-radius: 24rpx;
				font-size: 24rpx;
				margin-left: auto;
				background-color: $primary-color;
				color: #ffffff;
				text-align: center;
				line-height: 48rpx;
			}
			&-btn1 {
				width: 150rpx;
				height: 48rpx;
				border-radius: 24rpx;
				font-size: 24rpx;
				margin-left: auto;
				border: 1px solid $primary-color;
				color: $primary-color;
				box-sizing: border-box;
				justify-content: center;
			}
		}
		&-bottom {
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			background-color: #ffffff;
			box-sizing: border-box;
			&-box {
				width: 100%;
				height: 96rpx;
				padding: 20rpx;
				box-sizing: border-box;
				justify-content: center;
			}
		}
	}
</style>
